<template>
	<uv-popup ref="popupBox" mode="bottom" :round="10" @maskClick="closeFunc">
		<view class="title">审核尾款信息</view>
		<scroll-view class="scroll-view" scroll-y>
			<view class="table-box-show">
				<view class="table-box-show-item">
					<view class="table-box-show-item-title ellipsis">实付尾款金额</view>
					<view class="table-box-show-item-contnet">
						{{ wkxxData.amount_collected ? wkxxData.amount_collected + '元' : '--' }}
					</view>
				</view>
				<view class="table-box-show-item">
					<view class="table-box-show-item-title ellipsis">结算优惠金额</view>
					<view class="table-box-show-item-contnet">
						{{ wkxxData.settlement_discount_amount ? wkxxData.settlement_discount_amount + '元' : '--' }}
					</view>
				</view>
				<view class="table-box-show-item">
					<view class="table-box-show-item-title ellipsis">待付款金额</view>
					<view class="table-box-show-item-contnet">
						{{ wkxxData.unpaid_amount ? wkxxData.unpaid_amount + '元' : '--' }}
					</view>
				</view>
				<view class="table-box-show-item">
					<view class="table-box-show-item-title ellipsis">最终结算总额</view>
					<view class="table-box-show-item-contnet">
						{{ wkxxData.final_settlement_amount ? wkxxData.final_settlement_amount + '元' : '--' }}
					</view>
				</view>
				<view class="table-box-show-item">
					<view class="table-box-show-item-title ellipsis">最终利润金额</view>
					<view class="table-box-show-item-contnet">
						{{ wkxxData.final_profit_amount ? wkxxData.final_profit_amount + '元' : '--' }}
					</view>
				</view>
				<view class="table-box-show-item">
					<view class="table-box-show-item-title ellipsis">收款账户</view>
					<view class="table-box-show-item-contnet">
						{{ wkxxData.receiving_account_name || '--' }}
					</view>
				</view>
				<view class="table-box-show-item">
					<view class="table-box-show-item-title ellipsis">结算完成日期</view>
					<view class="table-box-show-item-contnet">
						{{ wkxxData.settlement_completion_date || '--' }}
					</view>
				</view>
				<view class="table-box-show-item">
					<view class="table-box-show-item-title ellipsis">质保截止日期</view>
					<view class="table-box-show-item-contnet">
						{{ wkxxData.warranty_deadline_date || '==' }}
					</view>
				</view>
				<view class="table-box-show-item">
					<view class="table-box-show-item-title ellipsis">备注</view>
					<view class="table-box-show-item-contnet">{{ wkxxData.remark || '--' }}</view>
				</view>
				<view class="table-box-show-item">
					<view class="table-box-show-item-title ellipsis">收款凭证</view>
					<view class="table-box-show-item-contnet">
						<view @click="preFileFunc(item)" class="table-box-show-item-contnet-file-name" v-for="(item, index) in wkxxData.payment_voucher" :key="index">
							{{ item.file_name }}
						</view>
					</view>
				</view>
			</view>
			<view class="uv-form-box">
				<uv-form labelPosition="top" :model="formData" :rules="rules" ref="form" labelWidth="auto">
					<uv-form-item label="" prop="content">
						<uv-radio-group v-model="formData.radiovalue">
							<uv-radio :customStyle="{ margin: '8px' }" label="通过" :name="1"></uv-radio>
							<uv-radio :customStyle="{ margin: '8px' }" label="拒绝" :name="2"></uv-radio>
						</uv-radio-group>
					</uv-form-item>

					<uv-form-item label="备注" prop="content">
						<uv-textarea height="100" v-model="formData.content" placeholder="请输入内容"></uv-textarea>
					</uv-form-item>
				</uv-form>
			</view>
		</scroll-view>
		<view class="btn-box">
			<uv-button
				@click="closeFunc"
				text="取 消"
				customTextStyle="font-weight: 400;font-size: 28rpx;color: #8F8F8F;"
				customStyle="width: 180rpx;height: 80rpx;background: #FFFFFF;border-radius: 16rpx;border: 2rpx solid #E3E3E3;margin-bottom:20rpx;"
			></uv-button>
			<uv-button
				@click="formSubmit"
				type="primary"
				text="提 交"
				customTextStyle="font-weight: 400;font-size: 28rpx;color: #FFFFFF;"
				customStyle="width: 500rpx;height: 80rpx;background: #3B75FF;border-radius: 16rpx;margin-bottom:20rpx;"
			></uv-button>
		</view>
	</uv-popup>
	<!-- 文件预览 -->
	<preFileCom :fileObj="fileObj" @onFileSuccess="onFileSuccess"></preFileCom>
</template>

<script setup>
import { computed, watch, onMounted, getCurrentInstance, ref, defineEmits } from 'vue';
const { proxy: that } = getCurrentInstance();
let props = defineProps({
	show: {
		type: Boolean,
		default: () => {
			return false;
		}
	},
	dataObj: {
		default: () => {
			return {};
		}
	},
	wkxxData: {
		default: () => {
			return {};
		}
	}
});
// 表单数据
let formData = ref({
	radiovalue: 1,
	content: ''
});
// 表单规则
let rules = ref({
	// content: {
	// 	required: true,
	// 	message: '请输入内容',
	// 	trigger: ['blur', 'change']
	// },
});

onMounted(() => {
	// that.$refs.popupBox.open();
	// getCompanyList();
});

watch(
	() => props.show,
	(newValue, oldValue) => {
		console.log(newValue, oldValue, '值变化', props.wkxxData);
		if (props.show) {
			that.$refs.popupBox.open();
		} else {
			formData.value = {
				radiovalue: 1,
				content: ''
			};
			that.$refs.form.clearValidate();
			that.$refs.popupBox.close();
		}
	}
);
const emit = defineEmits(['close', 'onSuccess']);

const closeFunc = () => {
	emit('close', false);
};
// 表单提交
const formSubmit = () => {
	let data = formData.value;
	let dataObj = props.dataObj;
	console.log(data, '表单数据', dataObj);
	that.$refs.form
		.validate()
		.then((res) => {
			uni.showLoading({
				mask: true,
				title: '信息提交中...'
			});
			if (data.radiovalue == 1) {
				// 通过
				that.$Api
					.discountReviewPassed({
						remark: data.content,
						project_id: props.dataObj.id,
						type: 2
					})
					.then((res) => {
						uni.hideLoading();
						if (res.code == 200) {
							emit('onSuccess', true);
						}
						uni.showToast({
							title: res.code == 200 ? '操作成功' : res.message,
							icon: res.code == 200 ? 'success' : 'error'
						});
					})
					.catch((err) => {
						uni.hideLoading();
					});
				return;
			}
			// 拒绝
			that.$Api
				.discountReviewRejected({
					remark: data.content,
					project_id: props.dataObj.id,
					type: 2
				})
				.then((res) => {
					uni.hideLoading();
					if (res.code == 200) {
						emit('onSuccess', true);
					}
					uni.showToast({
						title: res.code == 200 ? '操作成功' : res.message,
						icon: res.code == 200 ? 'success' : 'error'
					});
				})
				.catch((err) => {
					uni.hideLoading();
				});
		})
		.catch((errors) => {});
};

let fileObj = ref('');
const preFileFunc = (file) => {
	console.log(file);
	fileObj.value = file;
};
const onFileSuccess = () => {
	fileObj.value = '';
};
</script>

<style lang="scss" scoped>
.title {
	font-size: 32rpx;
	width: 100%;
	line-height: 100rpx;
	text-align: center;
}

.btn-box {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	box-sizing: border-box;
	margin-top: 30rpx;
}

.scroll-view {
	width: 100%;
	max-height: 50vh;
	background-color: #fff;

	.table-box {
		width: calc(100% - 60rpx);
		margin: 0 30rpx;
		box-sizing: border-box;
		border: 1rpx solid #ebeef5;
		border-bottom: 0;

		.table-item {
			width: 100%;
			display: flex;
			align-items: center;
			height: 80rpx;
			border-bottom: 1rpx solid #ebeef5;

			.table-item-title {
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 26rpx;
				border-right: 1rpx solid #ebeef5;
				text-align: center;
				background-color: #fafafa;
				color: #909399;
			}

			.table-item-content {
				width: calc(100% - 200rpx);
				height: 80rpx;
				line-height: 80rpx;
				font-size: 26rpx;
				text-align: center;
			}
		}
	}

	// padding: 0 30rpx;
	// box-sizing: border-box;
	.uv-form-box {
		padding: 0 30rpx !important;
	}

	.file-box {
		width: 100%;
		display: flex;
		flex-direction: row-reverse;
	}

	.file-list {
		width: 100%;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.file-item {
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
			margin-left: 10rpx;
			padding: 10rpx;
			background-color: #f8f8f8;

			.file-name {
				font-size: 24rpx;
			}
		}

		.file-media {
			width: 150rpx;
			height: 150rpx;
			margin: 0 27rpx 22rpx 0;
			overflow: hidden;
			border-radius: 10rpx;
			position: relative;

			&:nth-child(4n) {
				margin-right: 0;
			}

			.media-item {
				width: 100%;
				height: 100%;
			}

			.icon-box {
				position: absolute;
				z-index: 1;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: rgba(0, 0, 0, 0.6);
				width: 70rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
			}

			.del-icon {
				width: 60rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				z-index: 1;
				background-color: rgba(0, 0, 0, 0.6);
				border-radius: 10rpx;
			}
		}
	}
}
</style>
